<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>文章列表</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/iconfont.css" />
        <link rel="stylesheet" href="css/main.css" />
        <script src="./libs/jquery-1.12.4.min.js"></script>
    </head>

    <body>
        <div class="container-fluid">
            <div class="common_title">用户信息修改</div>
            <div class="container-fluid common_con">
                <form class="form-horizontal article_form" id="form">
                    <div class="form-group">
                        <label for="inputEmail1" class="col-sm-2 control-label"
                            >用户名称：</label
                        >
                        <div class="col-sm-4">
                            <input
                                type="text"
                                name="username"
                                class="form-control username"
                                id="inputEmail1"
                                value="李思思"
                            />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail2" class="col-sm-2 control-label"
                            >昵称：</label
                        >
                        <div class="col-sm-4">
                            <input
                                type="text"
                                name="nickname"
                                class="form-control nickname"
                                id="inputEmail2"
                                value="哈哈思"
                            />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label"
                            >邮箱：</label
                        >
                        <div class="col-sm-4">
                            <input
                                type="text"
                                name="email"
                                class="form-control email"
                                id="inputEmail3"
                                value="520@163.com"
                            />
                        </div>
                    </div>

                    <div class="form-group">
                        <label
                            for="inputPassword3"
                            class="col-sm-2 control-label"
                            >用户图标：</label
                        >
                        <div class="col-sm-10">
                            <img src="images/2.jpg" alt="" class="user_pic" />
                            <input
                                style="display: block"
                                name="userPic"
                                type="file"
                                id="exampleInputFile"
                            />
                            <!-- 给label标签的for属性赋值,值是input标签的id,那这样的话点击label就相当于点击了input -->
                            <br />
                            <label for="exampleInputFile">
                                <img
                                    src="./images/uploads_icon.jpg"
                                    style="height: 50px"
                                    alt=""
                                />
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputEmail4" class="col-sm-2 control-label"
                            >密码：</label
                        >
                        <div class="col-sm-4">
                            <input
                                type="password"
                                name="password"
                                class="form-control password"
                                id="inputEmail4"
                                value="12345678"
                            />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button
                                type="submit"
                                class="btn btn-success btn-edit"
                            >
                                修改
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>
<script>
    $(function () {
        // 1. 发起ajax请求,获得用户详细信息
        $.ajax({
            type: "get",
            url: "http://localhost:8080/api/v1/admin/user/detail",
            success: function (backData) {
                // console.log(backData);
                if (backData.code == 200) {
                    // 2. 将返回的数据,渲染到指定结构
                    // $('.username').val(backData.data.username);
                    // $('.password').val(backData.data.password);
                    // $('.email').val(backData.data.email);
                    // $('.nickname').val(backData.data.nickname);
                    for (let key in backData.data) {
                        $("." + key).val(backData.data[key]);
                    }
                    // 单独设置图片
                    $(".user_pic").attr("src", backData.data.userPic);
                }
            },
        });

        // 3. 给修改按钮设置点击事件
        $(".btn-edit").on("click", function (e) {
            e.preventDefault();

            // 4. 利用formData获得数据
            let fd = new FormData(document.querySelector("form"));

            // 5. 发起ajax请求,修改用户数据
            $.ajax({
                type: "post",
                url: "http://localhost:8080/api/v1/admin/user/edit",
                data: fd,
                contentType: false,
                processData: false,
                success: function (backData) {
                    if (backData.code == 200) {
                        // 6. 修改成功后,刷新index页面
                        // 当前代码在user页面,如何在子页面控制父页面的刷新
                        // 利用parent找到父页面
                        // parent == index页面
                        // 前提: 必须使用live server插件打开的页面才可以
                        parent.window.location.reload(); // 页面的刷新按钮
                    }
                },
            });
        });
    });
</script>
